<template>
  <div class="kehuzx">
    <div class="sq">日志审计</div>
    <div class="shouxin2">
      <div class="con_boxs">
        <!-- 搜索 -->
        <div class="con_sousuo">
          <el-form
            :inline="true"
            :model="formsq"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="日志开始日期:">
              <el-date-picker
                v-model="formsq.startTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="日志截止日期:">
              <el-date-picker
                v-model="formsq.endTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <!-- 搜索按钮 -->
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="logPageList(formsq)"
              >查询</el-button
            >
          </el-form>
        </div>

        <!-- 列表 -->
        <div class="con_table">
          <el-table
            :data="tableData"
            border
            style="width: 90%; margin: 26px; margin-top: -3px"
            :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
          >
            <!-- 列表数据 -->
            <el-table-column prop="id" label="序号" width="100px">
              <template slot-scope="scope">
                <span
                  >{{ (formsq.current - 1) * formsq.size + (scope.$index + 1) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="操作时间">
            </el-table-column>
            <el-table-column prop="createBy" label="操作人"> </el-table-column>
            <el-table-column prop="roleName" label="操作角色">
            </el-table-column>
            <el-table-column prop="title" label="操作内容"> </el-table-column>
            <el-table-column prop="type" label="操作结果">
              <template slot-scope="scope">
                {{
                  scope.row.type === "1"
                    ? "异常"
                    : scope.row.type === "0"
                    ? "正常"
                    : ""
                }}
              </template>
            </el-table-column>

            <!-- 列表数据end -->
            <!-- 操作按钮 -->
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="primary"
                  size="small"
                  round
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 分页 -->
      <div class="block" style="width: 90%; margin: 26px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formsq.current"
          :page-sizes="page.PageRange"
          :page-size="formsq.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <!-- 分页end -->
    </div>
  </div>
</template>


<script>
import { bankClient, addbh, addbhh, logPage } from "@/api/leagues/app";
export default {
  data() {
    return {
      input: "", //搜索框
      dialogFormVisible: false,
      dialogFbohuiVisible: false,
      rowid: "",
      value1: "",
      value2: "",
      formbh: {
        check: 0,
        password: "",
        id: "",
      },
      formbhh: {
        rejectReason: "",
      },
      formLabelWidth: "150px",
      // 列表
      tableData: [],
      formsq: {
        size: 10,
        current: 1, //默认从第一页开始
        endTime: "",
        startTime: "",
      },
      // 分页
      page: {
        PageRange: [10, 20, 30], //规定多少个页算一个区间
        total:0,
      },
    };
  },
  mounted() {
    this.logPageList();
  },

  //方法集合
  methods: {
    // 列表操作安钮
    handleClick(row) {
      console.log(row);
      // this.$router.push({
      //   name: "quertCustom",
      //   query: {
      //     id: row.id,
      //   },
      // });
    },

    //列表this.formt

    logPageList: function () {
      let params = this.formsq;
      let page = this.page;
      logPage(
        Object.assign(
          {
            current: page.current,
            size: page.size,
          },
          params
        )
      ).then((response) => {
        if (response) {
          var that = this;
          that.tableData = response.data.data.records;
          this.formsq.size = response.data.data.size;
          this.formsq.current = response.data.data.current;
          this.page.total = response.data.data.total;
          // that.$message({
          //   duration: 600,
          //   message: "查询成功",
          //   type: "success",
          // });
        } else {
          that.$message({
            duration: 600,
            message: response.data.data.msg,
            type: "warning",
          });
        }
      });
    },

    yunxu(row) {
      this.formbh.id = row.id;
      this.dialogFormVisible = true;
    },
    bohui(row) {
      this.formbhh.id = row.id;
      this.dialogFbohuiVisible = true;
    },
    queren() {
      var that = this;
      that.$refs.addbh.validate((valid) => {
        if (valid) {
          addbh(that.formbh).then((data) => {
            if (data.data) {
              that.dialogFormVisible = false;
              // that.$message({
              //   duration: 600,
              //   message: "查询成功",
              //   type: "success",
              // });
            }
            that.$message({
              duration: 600,
              message: response.data.data.msg,
              type: "warning",
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formsq.current = val;
      this.logPageList();
      console.log(`当前页: ${val}`);
    },
    PageRangeDate() {
      this.tableData.forEach((ele) => {
        this.PageRange.push(ele.id);
      });
      console.log(this.PageRange, "tab");
    },
    // 分页end
  },
};
</script>
<style scoped>
.kehuzx {
  width: 1200px;
  /* height: 882px; */
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
.dqz {
  height: 15px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 35px;
}
/* .el-button.is-round {
  width: 100px !important;
  height: 30px !important;
} */
.ddd {
  height: 40px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 25px;
}
.xg {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 1px solid #bdc3ca;
  border-radius: 3px;
}
.yd {
  margin-top: -12px;
  margin-left: 12px;
}
.shouxin2 {
  padding-top: 50px;
}

.yxq {
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #0075ff;
  line-height: 60px;
}
.con_sousuo {
  margin-left: 30px;
}
.sq {
  height: 24px;
  font-size: 25px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #051232;
  line-height: 24px;
  padding-top: 33px;
  padding-left: 21px;
}
.el-form-item__label {
  color: #838a99 !important;
}
</style>